<template>
  <div class="app-container">
    <!-- 左侧菜单栏 -->
    <div class="sidebar">
      <div class="sidebar-header">
        <div class="logo">
          <div class="h-30px w-30px">
            <img src="/logo.png" />
          </div>
          <div class="logo-text">
            <div class="logo-title">银海集团</div>
            <!-- <div class="logo-subtitle">数据大屏</div> -->
          </div>
        </div>
      </div>

      <div class="sidebar-content">
        <nav class="menu-nav">
          <!-- 一级菜单项 -->
          <div v-for="item in menuItems" :key="item.key" class="menu-group">
            <!-- 主菜单项 -->
            <div
              class="menu-item"
              :class="{
                active: isMenuActive(item),
                'has-children': item.children && item.children.length > 0,
              }"
              @click="handleMenuClick(item)"
            >
              <div class="menu-icon">
                <div :class="item.icon"></div>
              </div>
              <div class="menu-text">
                <div class="menu-title">{{ item.title }}</div>
                <div class="menu-subtitle">{{ item.subtitle }}</div>
              </div>
              <div class="menu-indicator"></div>
              <div
                v-if="item.children && item.children.length > 0"
                class="menu-arrow"
                :class="{ expanded: item.expanded }"
              >
                <div class="i-mdi-chevron-down"></div>
              </div>
            </div>

            <!-- 子菜单 -->
            <div
              v-if="item.children && item.children.length > 0"
              class="submenu"
              :class="{ expanded: item.expanded }"
            >
              <template v-for="child in item.children" :key="child.key">
                <router-link
                  v-if="child.path"
                  :to="child.path"
                  class="submenu-item"
                  :class="{ active: $route.path === child.path }"
                >
                  <div class="submenu-icon">
                    <div :class="child.icon"></div>
                  </div>
                  <div class="submenu-text">{{ child.title }}</div>
                </router-link>
              </template>
            </div>
          </div>
        </nav>
      </div>
    </div>

    <!-- 右侧内容区域 -->
    <div class="main-content">
      <router-view />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import autofit from "autofit.js";

// 菜单项类型定义
interface MenuItem {
  key: string;
  title: string;
  subtitle: string;
  icon: string;
  path?: string;
  children?: MenuItem[];
  expanded?: boolean;
}

const router = useRouter();
const route = useRoute();

// 菜单项数据
const menuItems = ref<MenuItem[]>([
  {
    key: "homepage",
    title: "总览",
    subtitle: "数据概览",
    icon: "i-mdi-view-dashboard text-xl",
    path: "/homepage",
  },
  {
    key: "aquaculture-management",
    title: "养殖过程管理",
    subtitle: "过程管理",
    icon: "i-mdi-fish text-xl",
    path: "/aquaculture-management",
  },
  {
    key: "ai-model",
    title: "智能AI大模型",
    subtitle: "AI智能",
    icon: "i-mdi-brain text-xl",
    path: "/ai-model",
  },
  {
    key: "asset-management",
    title: "设备管理",
    subtitle: "设备、物料管理",
    icon: "i-mdi-cog text-xl",
    expanded: false,
    path: "/asset/device",
    // children: [
    //   {
    //     key: "device-management",
    //     title: "设备管理",
    //     subtitle: "",
    //     icon: "i-mdi-cog-outline text-sm",
    //     path: "/asset/device",
    //   },
    //   {
    //     key: "fixed-asset-management",
    //     title: "固定资产管理",
    //     subtitle: "",
    //     icon: "i-mdi-office-building-outline text-sm",
    //     path: "/asset/fixed-asset",
    //   },
    //   {
    //     key: "consumable-management",
    //     title: "易耗品管理",
    //     subtitle: "",
    //     icon: "i-mdi-package-variant-closed text-sm",
    //     path: "/asset/consumable",
    //   },
    // ],
  },
  {
    key: "park-management",
    title: "园区管理",
    subtitle: "安防、门禁、广播",
    icon: "i-mdi-cctv text-xl",
    expanded: false,
    children: [
      {
        key: "security-management",
        title: "安防",
        subtitle: "",
        icon: "i-mdi-shield-check-outline text-sm",
        path: "/park/security",
      },
      {
        key: "access-control-management",
        title: "门禁",
        subtitle: "",
        icon: "i-mdi-door-open text-sm",
        path: "/park/access-control",
      },
      {
        key: "broadcast-management",
        title: "广播",
        subtitle: "",
        icon: "i-mdi-bullhorn-outline text-sm",
        path: "/park/broadcast",
      },
    ],
  },
  {
    key: "warehouse-management",
    title: "进销存",
    subtitle: "采购、仓储、销售",
    icon: "i-mdi-warehouse text-xl",
    path: "/warehouse-management",
  },
  {
    key: "oa-system",
    title: "在线办公",
    subtitle: "办公管理",
    icon: "i-mdi-office-building text-xl",
    path: "/oa-system",
  },
  {
    key: "party-building",
    title: "党建",
    subtitle: "党建管理",
    icon: "i-mdi-flag text-xl",
    path: "/party-building",
  },
  // {
  //   key: "scheduling-center",
  //   title: "调度中心大屏系统",
  //   subtitle: "调度管理",
  //   icon: "i-mdi-monitor-dashboard text-xl",
  // },
  // {
  //   key: "aquaculture-management",
  //   title: "养殖水产过程管理系统",
  //   subtitle: "过程管理",
  //   icon: "i-mdi-fish text-xl",
  // },
  // {
  //   key: "video-security",
  //   title: "视频&安防系统",
  //   subtitle: "安全监控",
  //   icon: "i-mdi-video text-xl",
  // },
  // {
  //   key: "garden-video",
  //   title: "园区视频监视系统",
  //   subtitle: "视频监控",
  //   icon: "i-mdi-cctv text-xl",
  // },
  // {
  //   key: "traceability",
  //   title: "水产养殖全生命周期溯源系统",
  //   subtitle: "溯源管理",
  //   icon: "i-mdi-timeline text-xl",
  // },
  // {
  //   key: "ai-model",
  //   title: "智能AI大模型",
  //   subtitle: "AI智能",
  //   icon: "i-mdi-brain text-xl",
  // },
  // {
  //   key: "ai-assistant",
  //   title: "水产养殖AI智能体助手",
  //   subtitle: "AI助手",
  //   icon: "i-mdi-robot text-xl",
  // },
  // {
  //   key: "warehouse-management",
  //   title: "仓储管理系统",
  //   subtitle: "仓储管理",
  //   icon: "i-mdi-warehouse text-xl",
  // },
  // {
  //   key: "marketing-management",
  //   title: "营销管理系统",
  //   subtitle: "营销管理",
  //   icon: "i-mdi-chart-line text-xl",
  // },
  // {
  //   key: "equipment-management",
  //   title: "设备管理系统",
  //   subtitle: "设备管理",
  //   icon: "i-mdi-cog text-xl",
  // },
  // {
  //   key: "oa-system",
  //   title: "OA办公系统",
  //   subtitle: "办公管理",
  //   icon: "i-mdi-office-building text-xl",
  // },
  // {
  //   key: "party-building",
  //   title: "党建系统",
  //   subtitle: "党建管理",
  //   icon: "i-mdi-flag text-xl",
  // },
  // {
  //   key: "hr-system",
  //   title: "人力资源系统",
  //   subtitle: "人事管理",
  //   icon: "i-mdi-account-group text-xl",
  // },
]);

// 菜单相关方法
const handleMenuClick = (item: MenuItem) => {
  if (item.children && item.children.length > 0) {
    // 有子菜单的项目，切换展开状态
    item.expanded = !item.expanded;
  } else if (item.path) {
    // 没有子菜单的项目，直接跳转
    router.push(item.path);
  }
};

const isMenuActive = (item: MenuItem): boolean => {
  if (item.path) {
    return route.path === item.path;
  }
  if (item.children) {
    return item.children.some((child) => child.path === route.path);
  }
  return false;
};

autofit.init();
</script>

<style scoped>
/* 应用容器 */
.app-container {
  display: flex;
  overflow: hidden;
  background: linear-gradient(135deg, #001122 0%, #003366 50%, #004488 100%);
  width: 100%;
  height: 100%;
}

/* 侧边栏 */
.sidebar {
  width: 280px;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(102, 204, 255, 0.15) 0%,
    rgba(102, 204, 255, 0.08) 50%,
    rgba(102, 204, 255, 0.05) 100%
  );
  border-right: 2px solid rgba(102, 204, 255, 0.3);
  backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.sidebar::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    #66ccff 20%,
    #66ccff 80%,
    transparent 100%
  );
  box-shadow: 0 0 20px #66ccff;
}

/* 侧边栏头部 */
.sidebar-header {
  padding-left: 20px;
  height: 80px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(102, 204, 255, 0.2);
  position: relative;
}

.sidebar-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 20px;
  right: 20px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #66ccff 50%,
    transparent 100%
  );
  box-shadow: 0 0 10px rgba(102, 204, 255, 0.5);
}

/* Logo区域 */
.logo {
  display: flex;
  align-items: center;
  gap: 16px;
}

.logo-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #66ccff, #33aaff);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #001122;
  box-shadow: 0 0 20px rgba(102, 204, 255, 0.6),
    inset 0 0 20px rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
}

.logo-icon::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 70%
  );
  animation: logoShine 3s ease-in-out infinite;
}

@keyframes logoShine {
  0%,
  100% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  50% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

.logo-text {
  flex: 1;
}

.logo-title {
  font-size: 20px;
  font-weight: bold;
  color: #66ccff;
  text-shadow: 0 0 15px rgba(102, 204, 255, 0.8);
  margin-bottom: 4px;
  letter-spacing: 1px;
}

.logo-subtitle {
  font-size: 12px;
  color: rgba(102, 204, 255, 0.7);
  letter-spacing: 2px;
}

/* 侧边栏内容 */
.sidebar-content {
  flex: 1;
  padding: 20px 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-content::-webkit-scrollbar {
  width: 4px;
}

.sidebar-content::-webkit-scrollbar-track {
  background: rgba(102, 204, 255, 0.1);
}

.sidebar-content::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #66ccff, #33aaff);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(102, 204, 255, 0.5);
}

/* 菜单导航 */
.menu-nav {
  padding: 0 16px;
}

.menu-group {
  margin-bottom: 4px;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  margin-bottom: 8px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  background: rgba(102, 204, 255, 0.05);
  border: 1px solid rgba(102, 204, 255, 0.1);
}

.menu-item.has-children {
  margin-bottom: 4px;
}

.menu-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(102, 204, 255, 0.1) 50%,
    transparent 100%
  );
  transition: left 0.5s ease;
}

.menu-item:hover::before {
  left: 100%;
}

.menu-item:hover {
  background: rgba(102, 204, 255, 0.12);
  border-color: rgba(102, 204, 255, 0.3);
  box-shadow: 0 8px 25px rgba(102, 204, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.menu-item.active {
  background: linear-gradient(
    135deg,
    rgba(102, 204, 255, 0.2) 0%,
    rgba(102, 204, 255, 0.1) 100%
  );
  border-color: #66ccff;
  box-shadow: 0 12px 30px rgba(102, 204, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.menu-item.active .menu-indicator {
  opacity: 1;
  transform: scaleY(1);
}

.menu-item.active .menu-title {
  color: #66ccff;
  text-shadow: 0 0 10px rgba(102, 204, 255, 0.6);
}

.menu-item.active .menu-icon {
  color: #66ccff;
  text-shadow: 0 0 15px rgba(102, 204, 255, 0.8);
  transform: scale(1.1);
}

/* 菜单图标 */
.menu-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(102, 204, 255, 0.8);
  transition: all 0.3s ease;
  margin-right: 16px;
}

/* 菜单文本 */
.menu-text {
  flex: 1;
}

.menu-title {
  font-size: 16px;
  font-weight: 600;
  color: rgba(102, 204, 255, 0.9);
  margin-bottom: 2px;
  transition: all 0.3s ease;
  letter-spacing: 0.5px;
}

.menu-subtitle {
  font-size: 12px;
  color: rgba(102, 204, 255, 0.6);
  letter-spacing: 1px;
}

/* 菜单指示器 */
.menu-indicator {
  width: 4px;
  height: 24px;
  background: linear-gradient(180deg, #66ccff, #33aaff);
  border-radius: 2px;
  opacity: 0;
  transform: scaleY(0);
  transition: all 0.3s ease;
  box-shadow: 0 0 10px rgba(102, 204, 255, 0.6);
}

/* 菜单箭头 */
.menu-arrow {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(102, 204, 255, 0.6);
  transition: all 0.3s ease;
  margin-left: 8px;
}

.menu-arrow.expanded {
  transform: rotate(180deg);
  color: #66ccff;
}

/* 子菜单 */
.submenu {
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
  background: rgba(102, 204, 255, 0.02);
  border-radius: 8px;
  margin: 0 8px 8px 8px;
}

.submenu.expanded {
  max-height: 300px;
  padding: 8px 0;
}

.submenu-item {
  display: flex;
  align-items: center;
  padding: 12px 24px;
  margin: 2px 8px;
  border-radius: 8px;
  text-decoration: none;
  color: rgba(102, 204, 255, 0.8);
  transition: all 0.3s ease;
  position: relative;
}

.submenu-item:hover {
  background: rgba(102, 204, 255, 0.1);
  color: #66ccff;
  transform: translateX(4px);
}

.submenu-item.active {
  background: rgba(102, 204, 255, 0.15);
  color: #66ccff;
  box-shadow: 0 0 15px rgba(102, 204, 255, 0.3);
}

.submenu-item.active::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  background: #66ccff;
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(102, 204, 255, 0.6);
}

.submenu-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  color: inherit;
}

.submenu-text {
  font-size: 14px;
  font-weight: 500;
  color: inherit;
}

/* 主内容区域 */
.main-content {
  flex: 1;
  height: 100%;
  overflow: hidden;
  position: relative;
}

/* 确保使用v-show的组件在隐藏时不占用空间 */
.main-content > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.main-content > *[style*="display: none"] {
  pointer-events: none;
}
</style>
